import { forwardRef, createRef, Component } from "react";

function App02() {
	const ref = createRef();
	const onClick = () => {
		console.log(ref);
		console.log(ref.current.getValue());
		console.log(ref.current.state.content);
		console.log(ref.current.ref.current.value);
	};
	return (
		<div className="App">
			<div>这是第二种用法：直接挂载到Class类的子组件</div>
			<Child ref={ref} />
			<button onClick={onClick}>请点击 查看console</button>
		</div>
	);
}

class Child extends Component {
	ref = createRef();
	constructor() {
		super();
		this.state = {
			content: "",
		};
	}

	onChange(e) {
		this.setState({ content: e.target.value });
	}

	getValue() {
		return this.state.content;
	}

	getRefValue() {
		return this.state.content;
	}

	render() {
		const { content } = this.state;
		return <input value={content} ref={this.ref} onChange={this.onChange.bind(this)} />;
	}
}

export default App02;
